<template>
    <div id="create-edit-container">
        <el-drawer
                direction="rtl"
                :visible.sync="stateManager.editDialogVisible"
                :title="modalTitle"
                custom-class="demo-drawer"
                ref="drawer"
                :before-close="closeDialog">
            <div class="dialog-drawer-content">
            <el-form ref="model" :model="model" :rules="ruleValidate">
                <!--姓名和指向类型-->
                <el-row type="flex" :gutter="20">
                    <el-col :span="24" >
                        <el-form-item label="素材名称" prop="name">
                            <el-input v-model="model.name" placeholder="请填写素材名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  type="flex" :gutter="20">
                    <el-col :span="24" >
                        <el-form-item label="素材标签" prop="tags">
                            <el-select v-model="model.tags"
                                       filterable
                                       multiple
                                       allow-create
                                       style="width: 100%" placeholder="请选择素材标签">
                                <el-option
                                        v-for="(item,key) in tags"
                                        :key="key"
                                        :label="item.label"
                                        :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
                <div class="dialog-drawer-footer">
                    <el-button type="ghost" @click="closeDialog" >取消</el-button>
                    <el-button type="primary" @click="saveModel"   :loading="stateManager.buttonLoading" >{{stateManager.buttonLoading?'提交中':'确定'}}</el-button>
                </div>
            </div>

        </el-drawer>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data:  function() {
      return {
        model: this.$modelDataSource({
          url:'/api/cms/asset',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
            tags:[]
          }
        }),
        isLoading: false,
        ruleValidate: {
          name: [
            {required: true, message: '请填写素材名称', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      closeDialog: function () {
        if(this.stateManager.buttonLoading){
          return false
        }
        this.stateManager.editDialogVisible = false
        this.stateManager.listLoading = false
        this.model.reset()
        this.$refs['model'].resetFields()
        this.stateManager.editModelId = 0
      },
      saveModel: function () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.isLoading = false
            self.stateManager.buttonLoading = true
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.refreshList = true
                self.stateManager.buttonLoading = false
                self.closeDialog()
              }, function (errors) {
                self.stateManager.buttonLoading = false
                self.isLoading = false
                self.$message.error('保存失败')
              })
          } else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
          'tags'
      ]),
      modalTitle () {
        return '编辑素材信息'
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, { }, function () {
          self.stateManager.editDialogVisible = true
        }, function () {
          self.stateManager.listLoading = false
        })
      }
    }
  }
</script>
